<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用戶名称：">
        <el-input v-model="formInline.username" placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：">
        <el-input v-model="formInline.phonenum" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="用户账号">
        <el-input v-model="formInline.account" placeholder="请输入用户账号"></el-input>
      </el-form-item>
      <el-form-item label="用户职类">
        <el-input v-model="formInline.category" placeholder="请输入用户职类"></el-input>
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker
            v-model="formInline.gmt_create"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="修改时间：">
        <el-date-picker
            v-model="formInline.gmt_modified"
            type="datetime"
            placeholder="选择日期时间"
            default-time="16:00:00">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="fromline" plain>重置</el-button>
      </el-form-item>
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">添加用户</el-button>
      </div>
    </el-form>
    <!-- 添加用户-->
    <el-dialog title="添加用户" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="form.account" placeholder="请输入用户账号"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phonenum" placeholder="请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item label="职类">
          <el-select v-model="value" placeholder="请选择用户职类">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          type="selection" width="45">
      </el-table-column>
      <el-table-column
          type="index"
          label="序号"
          width="100">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="account"
          label="用户账号">
      </el-table-column>
      <el-table-column
          prop="phonenum"
          label="手机号">
      </el-table-column>
      <el-table-column
          prop="category"
          label="用户职类">
      </el-table-column>
      <el-table-column
          prop="gmt_create"
          label="创建时间" width="200">
      </el-table-column>
      <el-table-column
          prop="gmt_modified"
          label="修改时间" width="200">
      </el-table-column>
      <el-table-column
          prop="handle"
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="changeUser(scope.row.uid)">修改</el-button>
          <el-button type="text" size="small" @click="open(scope.row.uid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:15px;">
      <el-pagination align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryparams.page"
                     :page-sizes="[5,10,20,50]"
                     :page-size="queryparams.offset"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryparams: {
        page: 1,
        offset: 10
      },

      formInline: {
        username: '',
        account: '',
        phonenum: '',
        category: '',
        gmt_create: '',
        gmt_modified: '',
        currentPage: 4
      },
      dialogVisible: false,
      form: {
        name: '',
        number: ''
      },
      options: [{
        value: '选项1',
        label: 'Java工程师'
      }, {
        value: '选项2',
        label: '测试工程师'
      }, {
        value: '选项3',
        label: '.Net工程师'
      }, {
        value: '选项4',
        label: '系统架构师'
      }, {
        value: '选项5',
        label: '网络工程师'
      }],
      value: '',
      tableData: [],
      total: 0, // 总条数
    }
  },
  created() {
    this.getUserData()
  },
  methods: {

    async getUserData() {
      const {data: res} = await this.$http({
        method: 'get',
        url: 'get/usr/info/' + this.queryparams.page + '/' + this.queryparams.offset + ''
      })
      // console.log(res.data.data)
      this.tableData = res.data.data
      this.total = res.data.total
    },


    onSubmit() {
      console.log('submit!');
    },
    changeUser(userid) {
      console.log(userid)
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(newSize) {
      this.queryparams.offset = newSize
      // 重新按照pagesize发送请求，请求最新的数据
      this.getUserData()

    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.queryparams.page = val
      this.getUserData()
    },
    open(uid) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 这里发送请求
        const {data: res} = await this.$http({
          method: 'delete',
          url: 'del/by/' + uid
        })

        if (res.result === "SUCCESS" && res.code == 200) {
          this.$message({type: 'success', message: '删除成功!'});
          this.getUserData() // 重新加载数据
        } else {
          this.$message({type: 'info', message: '删除失败!'});
        }
      }).catch(() => {
        this.$message({
          type: 'info', message: '已取消删除'
        });
      });
    }
  }
}
</script>
